import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, ScrollView, ImageBackground } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

const YveScreen = () => {
    const balance = 1256.00;

    const rechargeCards = [
        { type: '普通会员', color: '#8BC34A' },
        { type: '银卡会员', color: '#03A9F4' },
        { type: '金卡会员', color: '#FF9800' },
    ];

    const vipCards = [
        {
            type: '新年礼包',
            price: '¥1688元',
            title: '新年大礼包',
            details: ['豪华大床房券×6、自助午餐券×6', '200元代金券×2'],
            color: '#8BC34A'
        },
        {
            type: '宾会礼包',
            price: '¥2688元',
            title: '宾会大礼包-限卡以上会员专享',
            details: ['万枫宾会大房券×1、豪华大床房×5', '300元代金券×2'],
            color: '#03A9F4'
        },
        {
            type: '活动礼包',
            price: '¥999元',
            title: '超值大礼包-会卡会员专享',
            details: ['活馨客厅游券×5、豪华大床房券×3', '200元代金券×2'],
            color: '#FFA500'
        }
    ];

    const renderRechargeCard = (card: { type: string; color: string }) => (
        <TouchableOpacity
            key={card.type}
            style={[styles.rechargeCard, { backgroundColor: card.color }]}
        >
            <View style={styles.cardLeft}>
                <Text style={styles.cardType}>{card.type}</Text>
                <Text style={styles.rechargeTitle}>充值1000元 送 200元礼包</Text>
                <Text style={styles.rechargeDetail}>50元美甲券×1、100元美发券×3</Text>
                <Text style={styles.rechargeDetail}>200元改妆券×2</Text>
            </View>
            <TouchableOpacity style={styles.rechargeButton}>
                <Text style={styles.rechargeButtonText}>立即充值</Text>
            </TouchableOpacity>
        </TouchableOpacity>
    );

    const renderVipCard = (card: {
        type: string;
        price: string;
        title: string;
        details: string[];
        color: string;
    }) => (
        <View key={card.type} style={styles.vipCard}>
            <View style={[styles.vipCardHeader, { backgroundColor: card.color }]}>
                <Text style={styles.vipCardType}>{card.type}</Text>
            </View>
            <View style={styles.vipCardContent}>
                <View style={styles.vipCardInfo}>
                    <Text style={styles.vipCardPrice}>{card.price}</Text>
                    <Text style={styles.vipCardTitle}>{card.title}</Text>
                    {card.details.map((detail, index) => (
                        <Text key={index} style={styles.vipCardDetail}>{detail}</Text>
                    ))}
                </View>
                <TouchableOpacity style={styles.buyButton}>
                    <Text style={styles.buyButtonText}>立即购买</Text>
                </TouchableOpacity>
            </View>
        </View>
    );

    return (
        <ScrollView style={styles.container}>
            <View style={styles.header}>
                <Text style={styles.headerTitle}>专享礼包</Text>
            </View>

            <View style={styles.balanceSection}>
                <Text style={styles.balanceAmount}>{balance.toFixed(2)}</Text>
                <View style={styles.balanceLabel}>
                    <Icon name="info-outline" size={16} color="#fff" style={styles.infoIcon} />
                    <Text style={styles.balanceLabelText}>我的余额 (元)</Text>
                </View>
                <View style={styles.buttonContainer}>
                    <TouchableOpacity style={styles.button}>
                        <Text style={styles.buttonText}>余额明细</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.button}>
                        <Text style={styles.buttonText}>充值记录</Text>
                    </TouchableOpacity>
                </View>
            </View>

            <View style={styles.rechargeSection}>
                <Text style={styles.rechargeSectionTitle}>充值专享-升级礼包</Text>
                {rechargeCards.map(renderRechargeCard)}
            </View>

            <View style={styles.vipSection}>
                <Text style={styles.vipSectionTitle}>尊享优惠-服务礼包</Text>
                {vipCards.map(renderVipCard)}
            </View>
        </ScrollView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    header: {
        backgroundColor: '#8A2BE2',
        paddingVertical: 15,
        alignItems: 'center',
    },
    headerTitle: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold',
    },
    balanceSection: {
        backgroundColor: '#8A2BE2',
        paddingBottom: 30,
        alignItems: 'center',
    },
    balanceAmount: {
        color: '#fff',
        fontSize: 40,
        fontWeight: 'bold',
        marginVertical: 10,
    },
    balanceLabel: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 20,
    },
    infoIcon: {
        marginRight: 5,
    },
    balanceLabelText: {
        color: '#fff',
        fontSize: 14,
    },
    buttonContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        width: '100%',
        paddingHorizontal: 20,
    },
    button: {
        backgroundColor: 'rgba(255, 255, 255, 0.2)',
        paddingVertical: 8,
        paddingHorizontal: 30,
        borderRadius: 20,
        marginHorizontal: 10,
    },
    buttonText: {
        color: '#fff',
        fontSize: 14,
    },
    rechargeSection: {
        padding: 15,
    },
    rechargeSectionTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 15,
        color: '#333',
    },
    rechargeCard: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 15,
        borderRadius: 10,
        marginBottom: 15,
    },
    cardLeft: {
        flex: 1,
    },
    cardType: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(255, 255, 255, 0.2)',
        alignSelf: 'flex-start',
        paddingVertical: 2,
        paddingHorizontal: 8,
        borderRadius: 4,
        marginBottom: 8,
    },
    rechargeTitle: {
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 5,
    },
    rechargeDetail: {
        color: '#fff',
        fontSize: 12,
        opacity: 0.9,
    },
    rechargeButton: {
        backgroundColor: '#FFEB3B',
        paddingVertical: 6,
        paddingHorizontal: 12,
        borderRadius: 15,
    },
    rechargeButtonText: {
        color: '#8A2BE2',
        fontSize: 12,
        fontWeight: 'bold',
    },
    vipSection: {
        padding: 15,
        backgroundColor: '#fff',
    },
    vipSectionTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 15,
        color: '#333',
    },
    vipCard: {
        backgroundColor: '#fff',
        borderRadius: 10,
        marginBottom: 15,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.1,
        shadowRadius: 4,
        elevation: 3,
    },
    vipCardHeader: {
        padding: 8,
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,
    },
    vipCardType: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 'bold',
    },
    vipCardContent: {
        backgroundColor: '#FF0033',
        padding: 15,
        borderBottomLeftRadius: 10,
        borderBottomRightRadius: 10,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    vipCardInfo: {
        flex: 1,
    },
    vipCardPrice: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#fff',
        marginBottom: 5,
    },
    vipCardTitle: {
        fontSize: 14,
        color: '#fff',
        marginBottom: 5,
    },
    vipCardDetail: {
        fontSize: 12,
        color: '#fff',
        opacity: 0.9,
    },
    buyButton: {
        backgroundColor: '#FFEB3B',
        paddingVertical: 6,
        paddingHorizontal: 12,
        borderRadius: 15,
        marginLeft: 10,
    },
    buyButtonText: {
        color: '#FF0033',
        fontSize: 12,
        fontWeight: 'bold',
    },
});

export default YveScreen; 